<template>
  <div class="percentile-view">
    <!-- 头部标题 -->
    <div class="header">
      <h1>持仓股票10年百分位数据</h1>
      <div class="data-source">
        <span>数据来源：万得数据</span>
        <span>录入人员：刘迪君</span>
        <span>审核人员：曾凡云</span>
        <span>复核人员：黄谢越</span>
      </div>
    </div>
    
    <!-- 表格内容 -->
    <div class="table-container">
      <!-- 加载中状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <span>加载数据中...</span>
      </div>
      
      <!-- 数据展示 -->
      <div v-else-if="stockData.length > 0" class="table-wrapper">

        
        <table class="percentile-table">
          <!-- 表头 -->
          <thead>
            <tr>
              <th rowspan="2" class="stock-info">名称/代码</th>
              
              <!-- 10年个股百分位 -->
              <th colspan="4" class="section-header">
                <span class="section-title">个股百分位</span>
              </th>
              
              <!-- 10年行业板块百分位 -->
              <th colspan="4" class="section-header">
                <span class="section-title">行业板块百分位</span>
              </th>
              
              <!-- 10年大盘指数百分位 -->
              <th colspan="4" class="section-header">
                <span class="section-title">大盘指数百分位</span>
              </th>
            </tr>
            <tr>
              <!-- 个股百分位指标 -->
              <th class="indicator-header" title="市盈率">PE</th>
              <th class="indicator-header" title="市净率">PB</th>
              <th class="indicator-header" title="市销率">PS</th>
              <th class="indicator-header" title="市现率">PCF</th>
              
              <!-- 行业百分位指标 -->
              <th class="indicator-header" title="市盈率">PE</th>
              <th class="indicator-header" title="市净率">PB</th>
              <th class="indicator-header" title="市销率">PS</th>
              <th class="indicator-header" title="市现率">PCF</th>
              
              <!-- 大盘百分位指标 -->
              <th class="indicator-header" title="市盈率">PE</th>
              <th class="indicator-header" title="市净率">PB</th>
              <th class="indicator-header" title="市销率">PS</th>
              <th class="indicator-header" title="市现率">PCF</th>
            </tr>
          </thead>
          
          <!-- 表格内容 -->
          <tbody>
            <tr v-for="(item, index) in stockData" :key="index" :class="{ 'even-row': index % 2 === 1 }">
              <td class="stock-info tooltip-container" :title="`${item.name} ${item.code}`">
                <span class="stock-name truncate">{{ item.name }}</span>
                <span class="stock-code truncate">{{ item.code }}</span>
              </td>
              
              <!-- 个股百分位数据 -->
              <td :class="getPercentileClass(item.individual.PE)" class="data-cell">
                <span>{{ item.individual.PE }}</span>
              </td>
              <td :class="getPercentileClass(item.individual.PB)" class="data-cell">
                <span>{{ item.individual.PB }}</span>
              </td>
              <td :class="getPercentileClass(item.individual.PS)" class="data-cell">
                <span>{{ item.individual.PS }}</span>
              </td>
              <td :class="getPercentileClass(item.individual.PCF)" class="data-cell">
                <span>{{ item.individual.PCF }}</span>
              </td>
              
              <!-- 行业百分位数据 -->
              <td :class="getPercentileClass(item.sector.PE)" class="data-cell">
                <span>{{ item.sector.PE }}</span>
              </td>
              <td :class="getPercentileClass(item.sector.PB)" class="data-cell">
                <span>{{ item.sector.PB }}</span>
              </td>
              <td :class="getPercentileClass(item.sector.PS)" class="data-cell">
                <span>{{ item.sector.PS }}</span>
              </td>
              <td :class="getPercentileClass(item.sector.PCF)" class="data-cell">
                <span>{{ item.sector.PCF }}</span>
              </td>
              
              <!-- 大盘百分位数据 -->
              <td :class="getPercentileClass(item.market.PE)" class="data-cell">
                <span>{{ item.market.PE }}</span>
              </td>
              <td :class="getPercentileClass(item.market.PB)" class="data-cell">
                <span>{{ item.market.PB }}</span>
              </td>
              <td :class="getPercentileClass(item.market.PS)" class="data-cell">
                <span>{{ item.market.PS }}</span>
              </td>
              <td :class="getPercentileClass(item.market.PCF)" class="data-cell">
                <span>{{ item.market.PCF }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 无数据状态 -->
      <div v-else class="empty-state">
        <span>暂无数据</span>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <BottomNav />
  </div>
</template>

<script>
import BottomNav from '../components/BottomNav.vue'
import { apiSelectPercentile } from '../api/Percentile.js'

export default {
  name: 'PercentileView',
  components: {
    BottomNav
  },
  data() {
    return {
      stockData: [],
      loading: true
    }
    
  },
  created() {
    this.fetchPercentileData()
  },
  methods: {
    // 获取百分位数据
    async fetchPercentileData() {
      try {
        this.loading = true
        const response = await apiSelectPercentile()
        
        console.log('API响应:', response)
        
        // 验证响应数据并进行格式化处理
        // 简化数据赋值，直接从响应中获取items数组
        const items = response?.data?.data?.items || []
        
        // 简化数据映射逻辑
        this.stockData = items.map(item => ({
          name: item.name || '',
          code: item.id || '',
          individual: {
            PE: (item.stock_pe || '').toString().replace('%', ''),
            PB: (item.stock_pb || '').toString().replace('%', ''),
            PS: (item.stock_ps || '').toString().replace('%', ''),
            PCF: (item.stock_pcf || '').toString().replace('%', '')
          },
          sector: {
            PE: (item.band_pe || '').toString().replace('%', ''),
            PB: (item.band_pb || '').toString().replace('%', ''),
            PS: (item.band_ps || '').toString().replace('%', ''),
            PCF: (item.band_pcf || '').toString().replace('%', '')
          },
          market: {
            PE: (item.index_pe || '').toString().replace('%', ''),
            PB: (item.index_pb || '').toString().replace('%', ''),
            PS: (item.index_ps || '').toString().replace('%', ''),
            PCF: (item.index_pcf || '').toString().replace('%', '')
          }
        }))
        
        console.log('获取到的股票数据:', this.stockData)
      } catch (error) {
        console.error('获取百分位数据时发生错误:', error)
        this.stockData = []
      } finally {
        this.loading = false
      }
    },
    
    // 根据百分位值返回对应的CSS类名
    getPercentileClass(value) {
      // 对于'-'或其他非数值标记，返回默认样式
      if (value === null || value === undefined || value === '' || value === '-' || isNaN(value)) {
        return ''
      }
      
      // 将字符串转换为数字
      const percentile = parseFloat(value)
      
      // 检查是否为有效数字
      if (isNaN(percentile)) {
        return ''
      }
      
      // 百分位小于30%为低估值（绿色）
      if (percentile < 30) {
        return 'percentile-low'
      }
      // 百分位大于70%为高估值（红色）
      else if (percentile > 70) {
        return 'percentile-high'
      }
      // 介于30%-70%之间为中等估值（黄色）
      else {
        return 'percentile-medium'
      }
    }
  }
}
</script>

<style scoped>
/* 全局样式重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 基础视图样式 */
.percentile-view {
  padding: 15px;
  padding-bottom: 90px; /* 为底部导航栏留出空间 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  margin-bottom: 20px;
  text-align: center;
}

.header h1 {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
}

.data-source {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: #666;
}

/* 表格容器 - 增强滚动体验 */
.table-container {
  overflow: auto; /* 启用垂直和水平滚动 */
  background: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-overflow-scrolling: touch; /* 平滑滚动 */
  scroll-behavior: smooth; /* 平滑滚动行为 */
  max-height: calc(100vh - 200px); /* 限制最大高度，确保底部导航和头部可见 */
  min-height: 300px;
  position: relative;
  /* 添加滚动指示器 */
  mask-image: linear-gradient(to right, black 90%, transparent 100%), 
               linear-gradient(to bottom, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%), 
                      linear-gradient(to bottom, black 90%, transparent 100%);
}



/* 加载中状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #666;
  font-size: 14px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 无数据状态样式 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 14px;
  height: 200px;
}

/* 表格包装器样式 - 用于数据展示时 */
.table-wrapper {
  width: 100%;
  min-width: 768px;
  position: relative;
  overflow: visible;
  /* 确保内容正确显示 */
  display: inline-block;
}

/* 滚动条样式优化 - 使其更明显，同时添加垂直滚动条样式 */
.table-container::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
}

.table-container::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 5px;
  transition: background 0.3s;
  border: 2px solid #f1f1f1;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #2980b9;
}

/* Firefox滚动条样式 */
.table-container {
  scrollbar-width: thin;
  scrollbar-color: #3498db #f1f1f1;
}

/* 表格样式 */
.percentile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

/* 表头样式 */
.percentile-table th {
  background-color: #fafafa;
  padding: 10px 6px;
  text-align: center;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  min-width: fit-content;
  font-size: 13px;
  position: relative;
}

.percentile-table th:hover {
  background-color: #e8e8e8;
}

/* 表格单元格样式 - 现代化设计 */
.percentile-table td {
  padding: 10px 6px;
  text-align: center;
  border-bottom: 1px solid #f8f9fa;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 12px;
  background: white;
  border-right: 1px solid #f8f9fa;
  position: relative;
}

.percentile-table td:last-child {
  border-right: none;
}

/* 行悬停效果 - 现代化设计 */
.percentile-table tr:hover td {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #3498db;
}

/* 斑马条纹效果 - 现代化设计 */
.percentile-table tr.even-row td {
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.percentile-table tr.even-row:hover td {
  background: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);
  transform: translateY(-1px);
}

/* 表头特殊样式 */
.stock-info {
  text-align: left !important;
  min-width: 120px;
  background-color: #f9f9f9 !important;
  font-weight: bold;
}

/* 数据区块区分 */
.section-header {
  position: relative;
  background-color: #fafafa !important;
  color: #1890ff !important;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
}

.section-header:hover {
  background-color: #e8e8e8 !important;
}

/* 区块标题样式 */
.section-title {
  display: inline-block;
}

/* 数据单元格样式 - 优化宽度 */
.data-cell {
  font-weight: 500;
  min-width: 60px;
  width: 60px;
  /* 移除position: relative，因为不再需要提示框定位 */
  /* 确保内容在小屏幕上也能显示完整 */
  padding: 8px 4px;
}

/* 文本截断样式 */
.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 仅名称/代码列的提示框容器样式 */
.stock-info.tooltip-container {
  cursor: help;
  position: relative; /* 确保提示框相对于单元格定位 */
}

/* 仅名称/代码列的提示框样式 */
.stock-info.tooltip-container::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 5px); /* 显示在单元格上方，留出间距 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  pointer-events: none;
}

/* 确保提示框不会超出视口 */
.stock-info.tooltip-container::before {
  /* 添加视口检查，确保提示框不会超出边界 */
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal;
}

/* 仅名称/代码列的提示框三角箭头 */
.stock-info.tooltip-container::after {
  content: '';
  position: absolute;
  bottom: 100%; /* 显示在单元格上方 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1000;
  pointer-events: none;
}

/* 仅名称/代码列鼠标悬停时显示提示框 */
.stock-info.tooltip-container:hover::before,
.stock-info.tooltip-container:hover::after {
  opacity: 1;
  visibility: visible;
}

/* 仅名称/代码列触摸设备支持 */
.stock-info.tooltip-container:active::before,
.stock-info.tooltip-container:active::after {
  opacity: 1;
  visibility: visible;
}

/* 数据区块区分 - 内容部分 */
/* 个股百分位区域 */
.percentile-table td:nth-child(2),
.percentile-table td:nth-child(3),
.percentile-table td:nth-child(4),
.percentile-table td:nth-child(5) {
  border-right: 1px solid #f0f0f0;
}

/* 行业百分位区域 */
.percentile-table td:nth-child(6),
.percentile-table td:nth-child(7),
.percentile-table td:nth-child(8),
.percentile-table td:nth-child(9) {
  border-right: 1px solid #f0f0f0;
}

/* 表头第二行 - 指标列视觉优化 */
.percentile-table thead tr:nth-child(2) th {
  font-weight: 600;
  background-color: #f0f0f0;
}

/* 指标表头样式 */
.indicator-header {
  min-width: 50px;
  font-size: 12px;
  cursor: help;
}

/* 表头第二行 - 区块分隔 */
.percentile-table thead tr:nth-child(2) th:nth-child(1) {
  background-color: #f4f4f4;
}

/* 指标列分隔线 */
.percentile-table thead tr:nth-child(2) th:not(:last-child) {
  position: relative;
}

.percentile-table thead tr:nth-child(2) th:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: #ddd;
}

/* 增强表格的表头样式 */
.percentile-table thead .stock-info {
  background-color: #f9f9f9;
}

/* 股票信息单元格 */
.stock-name {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-code {
  display: block;
  font-size: 11px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 百分位颜色样式 - 增强视觉效果 */
.percentile-low {
  color: #52c41a;
  font-weight: 600;
}

.percentile-medium {
  color: #faad14;
  font-weight: 600;
}

.percentile-high {
  color: #f5222d;
  font-weight: 600;
}

/* 响应式设计 - PC端优化 */
@media (min-width: 1024px) {
  .percentile-view {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
  }
  
  .header {
    margin-bottom: 25px;
  }
  
  .header h1 {
    font-size: 22px;
  }
  
  .data-source {
    font-size: 13px;
    gap: 15px;
  }
  
  .table-container {
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    mask-image: none;
    -webkit-mask-image: none;
  }
  
  .percentile-table {
    font-size: 14px;
    /* 自动调整列宽 */
    table-layout: auto;
  }
  
  .percentile-table th,
  .percentile-table td {
    padding: 12px 10px;
    /* 允许内容在必要时换行 */
    white-space: normal;
    word-wrap: break-word;
  }
  
  .stock-info {
    min-width: 180px;
    width: 180px;
  }
  
  .data-cell {
    min-width: 80px;
    width: auto;
  }
  
  .indicator-header {
    min-width: 80px;
    font-size: 13px;
  }
  
  
}

/* 响应式设计 - 平板端优化 */
@media (max-width: 1023px) and (min-width: 769px) {
  .percentile-view {
    padding: 15px;
  }
  
  .header h1 {
    font-size: 20px;
  }
  
  .data-source {
    font-size: 12px;
  }
  
  .table-container {
    padding: 12px;
    border-radius: 8px;
  }
  
  .percentile-table {
    font-size: 13px;
  }
  
  .percentile-table th,
  .percentile-table td {
    padding: 10px 8px;
  }
  
  .stock-info {
    min-width: 150px;
    width: 150px;
  }
}

/* 响应式设计 - 小型平板和手机端优化 */
@media (max-width: 768px) {
  .percentile-view {
    padding: 12px;
  }
  
  .header {
    margin-bottom: 15px;
  }
  
  .header h1 {
    font-size: 16px;
  }
  
  .data-source {
    font-size: 11px;
    gap: 8px;
  }
  
  .table-container {
    padding: 8px;
    border-radius: 6px;
  }
  
  .table-wrapper {
    min-width: 640px;
  }
  
  /* 显示移动端滑动提示 */
  .mobile-tip {
    display: block;
  }
  
  .percentile-table {
    font-size: 12px;
  }
  
  .percentile-table th,
  .percentile-table td {
    padding: 8px 6px;
  }
  
  .stock-info {
    min-width: 130px;
    width: 130px;
  }
  
  .stock-name {
    font-size: 12px;
  }
  
  .stock-code {
    font-size: 10px;
  }
  
  .data-cell {
    min-width: 45px;
    width: 45px;
  }
  
  .indicator-header {
    min-width: 45px;
    font-size: 11px;
  }
}

/* 响应式设计 - 手机端优化 */
@media (max-width: 480px) {
  .percentile-view {
    padding-bottom: 80px;
    padding: 8px;
  }
  
  .header {
    margin-bottom: 12px;
  }
  
  .header h1 {
    font-size: 15px;
    margin-bottom: 8px;
  }
  
  .data-source {
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
  }
  
  .table-container {
    border-radius: 4px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .table-wrapper {
    min-width: 500px;
  }
  
  .percentile-table {
    font-size: 11px;
  }
  
  .percentile-table th,
  .percentile-table td {
    padding: 6px 4px;
    font-size: 11px;
  }
  
  .stock-info {
    min-width: 110px;
    width: 110px;
  }
  
  .section-header {
    font-size: 10px;
  }
  
  .section-title {
    font-size: 10px;
  }
  
  .data-cell {
    min-width: 40px;
    width: 40px;
  }
  
  .indicator-header {
    min-width: 40px;
    font-size: 10px;
  }
  
  /* 增强移动端表格的可读性 */
  .percentile-table td {
    font-weight: 500;
  }
  
  /* 优化移动端滑动体验 */
  .table-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* 增强移动端固定表头效果 */
  .percentile-table thead th {
    font-size: 10px;
    padding: 5px 3px;
  }
}

/* 打印样式 */
@media print {
  .percentile-view {
    padding: 0;
    background: white;
  }
  
  .table-container {
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  .mobile-tip {
    display: none;
  }
  
  .BottomNav {
    display: none;
  }
  
  /* 确保打印时表格完整 */
  .percentile-table {
    font-size: 10pt;
    page-break-inside: avoid;
  }
  
  .percentile-table th,
  .percentile-table td {
    padding: 8px 6px;
    border: 1px solid #ddd;
  }
}
</style>